<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref, computed } from 'vue'
import userStore from '@/store/modules/user.js'
import { getCodeCheckAPI, loginAPI } from '@/api/user.js'
import { ElMessage } from 'element-plus'

// 仓库
const store = userStore()

// 弹框显示
const dialogTableVisible = ref(true)

// 微信扫一扫登录
const wechatShow = ref(false)

// 登录表单数据
const formData = ref({
    phone: '',
    code: ''
})

// 校验规则
const rules = {
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
        },
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
        }
    ],
    code: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
        },
        {
            pattern: /^\d{6}$/,
            message: '请输入正确的验证码',
            trigger: 'blur'
        }
    ]
}

// 计算获取验证码按钮是否解禁
const isDisabled = computed(() => {
    return rules.phone[1].pattern.test(formData.value.phone)
})

// 倒计时数据
const countSecond = ref(10)

// 获取验证码
const getCode = async () => {
    
    if (!countDownVisible.value) {
        countDownVisible.value = true
        let timer = setInterval(() => {
            countSecond.value--
        }, 1000);

        setTimeout(() => {
            countDownVisible.value = false
            clearInterval(timer)
            countSecond.value = 10
        }, 10000)

        const res = await getCodeCheckAPI(formData.value.phone)
        // console.log(res);
        if (res.code === 200) {
            // 请求的成功提示用户
            ElMessage.success('获取验证码成功')
            formData.value.code = res.data
        }

    }

}

// 表单对象
const formRef = ref(null)

// 登录逻辑
const Login = () => {
    // 整体校验
    formRef.value.validate(async (valid) => {
        if (valid) {
            // 发送请求登录
            const res = await store.getLogin(formData.value)
            console.log(res);
            if (res.code === 200) {
                // 关闭登录框
                formRef.value.resetFields()
                countDownVisible.value = false
                store.setDialogShow(false)
            }
         }
    })
}

// 倒计时显示控制
const countDownVisible = ref(false)

// 关闭窗口
const closeDialog = () => {
    store.setDialogShow(false)
    formRef.value.resetFields()
}

</script>

<template>
    <div class="login">
        <el-dialog v-model="store.dialogShow" title="用户登录">
            <el-divider style="margin-bottom: 30px;margin-top: 0;;" />
            <el-row>
                <el-col :span="12" style="padding: 20px; border: 1px solid #efefef; border-radius: 10px;">
                    <div v-if="wechatShow" class="wechat">
                        <h3 style="margin-top: 0;">微信扫码登录</h3>
                        <div style="text-align: center;">
                            <div><img src="../assets/images/code_login_wechat.png" alt=""></div>
                            <div><span style="margin-top: 60px;" @click="wechatShow = false">手机号登录</span></div>
                            <svg  @click="wechatShow = false" t="1706695988353" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3107" width="32" height="32">
                                <path
                                    d="M736 64H288a71.76 71.76 0 0 0-71.68 71.68v752.64A71.76 71.76 0 0 0 288 960h448a71.76 71.76 0 0 0 71.68-71.68V135.68A71.76 71.76 0 0 0 736 64zM512 879.36a35.84 35.84 0 1 1 35.84-35.84A35.84 35.84 0 0 1 512 879.36z m233-116.48H279V189.44h466z"
                                    fill="#22B573" p-id="3108"></path>
                            </svg>
                        </div>
                    </div>
                    <div v-else>
                        <el-form ref="formRef" :model="formData" :rules="rules">
                            <el-form-item prop="phone">
                                <el-input v-model="formData.phone" :prefix-icon="User" placeholder="请输入手机号码"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input v-model="formData.code" :prefix-icon="Lock" placeholder="请输入手机验证码"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button v-if="!countDownVisible" :disabled="!isDisabled" @click="getCode" plain>
                                    <span >获取验证码</span>
                                </el-button>
                                <el-button  v-else :disabled="true" @click="getCode" plain>
                                    <span>重新获取({{ countSecond }}s)</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <div class="bottom">
                            <el-button type="primary" style="width: 100%;" @click="Login">用户登录</el-button>
                            <p @click="wechatShow = true">微信扫码登录</p>
                            <svg @click="wechatShow = true" t="1706609761127" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3650" width="32" height="32">
                                <path
                                    d="M512 2C230.6 2 2 230.6 2 512s228.6 510 510 510 510-228.6 510-510S793.3 2 512 2z m-93.5 644.3c-24.6 0-49.3-4.3-71.4-10.2-1.7 0-4.3-1.7-4.3-1.7l-55.3 32.3c-14.4 8.5-24.7 1.7-20.4-14.4 0 0 14.4-59.5 11.9-59.5-52.7-34.9-77.4-79.9-77.4-141.1 4.3-102.8 94.4-184.5 216.8-184.5 112.2 0 204 69.7 220.2 161.5h-10.2c-112.2 0-204 77.4-204 173.4 0 16.1 1.7 30.6 6 45h-11.9v-0.8z m328.1 79.9l16.1 32.3c8.5 14.5 1.7 20.4-11.9 11.9 0 0-40.8-24.7-42.5-22.1-18.7 6-59.5 11.9-79.9 11.9-103.7 0-189.6-71.4-189.6-159s85.9-159 189.6-159S818 513.7 818 601.3c0 51.8-26.3 94.3-71.4 124.9zM353 363.3c-8.5-5.1-19.5-5.1-28.9 0-8.5 5.1-14.4 14.4-14.4 24.6s5.1 19.6 14.4 24.7c8.5 5.1 19.6 5.1 28.9 0 8.5-5.1 14.5-14.5 14.5-24.7s-6-19.6-14.5-24.6zM510.3 416c16.2 0 28.9-12.8 28.9-28.9 0-10.2-5.1-19.5-14.4-24.6-8.5-5.1-19.6-5.1-28.9 0-9.3 5.1-14.4 14.4-14.4 24.6-0.1 16.1 12.6 28.9 28.8 28.9z m187 100.3c-13.6 0-24.6 11-24.6 24.6s11 24.6 24.6 24.6 24.7-11 24.7-24.6-11.1-24.6-24.7-24.6z m-134.3 0c-13.6 0-24.6 11-24.6 24.6s11 24.6 24.6 24.6 24.6-11 24.6-24.6-11-24.6-24.6-24.6z"
                                    fill="#08BA06" p-id="3651"></path>
                            </svg>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="left">
                        <div class="top">
                            <img src="../assets/images/code_app.png" alt="">
                            <svg t="1706610462696" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="3808" width="16" height="16">
                                <path
                                    d="M611.118 512.385c-17.065 0-34.139 15.821-34.139 35.343 0 15.821 17.074 31.734 34.139 31.734 25.633 0 43.925-15.913 43.925-31.734 0.001-19.522-18.291-35.343-43.925-35.343z m-112.18-164.666c26.833 0 43.9-17.064 43.9-42.688 0-26.835-17.066-42.658-43.9-42.658-25.6 0-50.004 15.823-50.004 42.658 0 25.623 24.404 42.688 50.004 42.688zM370.893 702.606c-45.128 0-78.056-7.313-120.738-19.521l-123.161 62.178 35.385-104.835C75.78 579.462 24.574 502.583 24.574 408.695c0-165.842 156.081-292.683 346.319-292.683 168.297 0 318.29 100.008 347.548 241.469-12.183-2.447-23.153-3.65-32.913-3.65-165.86 0-293.888 124.413-293.888 274.382 0 25.633 3.658 48.76 9.745 73.183-9.745 1.21-20.732 1.21-30.492 1.21zM879.43 822.142l24.37 87.801-92.677-52.458c-35.366 7.305-69.507 18.317-104.866 18.317-163.42 0-292.692-112.23-292.692-251.277 0-138.967 129.272-251.173 292.692-251.173 154.87 0 293.903 112.206 293.903 251.173 0 78.081-52.434 147.565-120.73 197.617z m-621.937-559.77c-25.608 0-52.441 15.824-52.441 42.66 0 25.622 26.833 42.687 52.441 42.687 24.378 0 43.9-17.064 43.9-42.688 0-26.835-19.529-42.658-43.9-42.658z m545.098 250.013c-18.301 0-34.14 15.821-34.14 35.343 0 15.821 15.839 31.734 34.14 31.734 24.398 0 42.698-15.913 42.698-31.734 0-19.522-18.3-35.343-42.698-35.343z m0 0"
                                    fill="#8A8A8A" p-id="3809"></path>
                            </svg>
                            <p>微信扫一扫关注“快速预约挂号”</p>
                        </div>
                        <div class="top">
                            <img src="../assets/images/code_login_wechat.png" alt="">
                            <svg t="1706611409555" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6066" width="16" height="16">
                                <path
                                    d="M713.528899 68.594261l-403.462005-0.403183c-44.582381 0-80.288604 36.109406-80.288604 80.69281l0 726.232223c0 44.582381 35.706223 80.69281 80.288604 80.69281l403.462005 0c44.582381 0 80.69281-36.109406 80.69281-80.69281L794.22171 148.883889C794.22171 104.301508 758.112304 68.594261 713.528899 68.594261zM713.528899 794.423301 310.066895 794.423301 310.066895 229.575676l403.462005 0L713.528899 794.423301z"
                                    p-id="6067"></path>
                            </svg>
                            <p>扫一扫下载“快速预约挂号”</p>
                        </div>
                    </div>
                    <div class="bottom2">
                        <p>尚医通官方指定平台</p>
                        <p>快速挂号 安全放心</p>

                    </div>
                </el-col>
            </el-row>
            <el-divider style="margin-bottom: 10px;" />
            <div class="footer">
                <el-button @click="closeDialog">关闭窗口</el-button>
            </div>
        </el-dialog>
    </div>
</template>



<style lang="scss" scoped>
.login {
    ::v-deep(.el-dialog_body) {
        border-top: 1px solid #000;
    }
}

.bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.left {
    display: flex;
    justify-content: space-between;

    .top {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        img {
            width: 80%;
        }

        p {
            text-align: center;
            padding: 0;
            width: 80%;
        }
    }

}

.bottom2 {
    text-align: center;
    margin-top: 40px;

    p {
        margin: 15px 0;
        font-size: 20px;
        font-style: italic;
    }

}

.footer {
    text-align: right;
    margin: 0;

    .el-button {
        margin: 0;
    }

}

.wechat {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    h3 {

        text-align: center;
        margin-left: 20px;
        font-size: 20px;
    }

    img {
        width: 70%;

    }
}</style>